<template>
    <div class="app-container">
        <!-- 数据统计卡片 -->
        <el-row :gutter="20" class="statistics-container">
            <el-col :span="6">
                <el-card shadow="hover" class="statistics-card">
                    <template #header>
                        <div class="card-header">
                            <span>商品总数</span>
                            <el-tag type="success" effect="plain">本月</el-tag>
                        </div>
                    </template>
                    <div class="statistics-value">
                        <div class="number-wrapper">
                            <span class="number">{{ total }}</span>
                            <span class="unit">个</span>
                        </div>
                        <div class="description-text">
                            <el-icon>
                                <TrendCharts />
                            </el-icon>
                            <span>本月新增商品数量创历史新高</span>
                        </div>
                    </div>
                    <div class="statistics-compare">
                        <span class="label">环比上月</span>
                        <span class="value increase">+12.5%</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="statistics-card">
                    <template #header>
                        <div class="card-header">
                            <span>本月订单</span>
                            <el-tag type="danger" effect="plain">热销</el-tag>
                        </div>
                    </template>
                    <div class="statistics-value">
                        <div class="number-wrapper">
                            <span class="number">328</span>
                            <span class="unit">单</span>
                        </div>
                        <div class="order-details">
                            <div class="detail-item">
                                <span class="label">已完成</span>
                                <span class="value">289</span>
                            </div>
                            <div class="detail-item">
                                <span class="label">配送中</span>
                                <span class="value">39</span>
                            </div>
                        </div>
                    </div>
                    <div class="statistics-compare">
                        <span class="label">环比上月</span>
                        <span class="value increase">+28.3%</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="statistics-card">
                    <template #header>
                        <div class="card-header">
                            <span>商品状态</span>
                            <el-tag type="primary" effect="plain">实时</el-tag>
                        </div>
                    </template>
                    <div class="statistics-value">
                        <div class="status-stats">
                            <div class="stat-item">
                                <span class="label">在售商品</span>
                                <span class="value success">{{ onSaleCount }}</span>
                            </div>
                            <div class="stat-item">
                                <span class="label">已下架</span>
                                <span class="value warning">{{ offSaleCount }}</span>
                            </div>
                            <div class="stat-item">
                                <span class="label">库存预警</span>
                                <span class="value danger">{{ lowStockCount }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="statistics-compare">
                        <span class="label">商品动态</span>
                        <span class="value normal">实时监控</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="statistics-card">
                    <template #header>
                        <div class="card-header">
                            <span>销量排行</span>
                            <el-tag type="warning" effect="plain">TOP 3</el-tag>
                        </div>
                    </template>
                    <div class="statistics-value">
                        <div class="sales-rank">
                            <div class="rank-list">
                                <div v-for="(item, index) in salesRankList.slice(0, 3)" :key="index" class="rank-item">
                                    <span class="rank-number" :class="'rank-' + (index + 1)">{{ index + 1 }}</span>
                                    <span class="product-name">{{ item.name }}</span>
                                    <span class="sales-count">{{ item.sales }}{{ item.unit }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="statistics-compare">
                        <span class="label">统计周期</span>
                        <span class="value normal">近30天</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 搜索栏 -->
        <div class="search-wrapper">
            <el-card class="search-card" :body-style="{ padding: '16px' }">
                <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" class="compact-form">
                    <div class="form-content">
                        <el-form-item label="商品名称">
                            <el-input v-model="queryParams.productsName" placeholder="请输入商品名称" clearable
                                @keyup.enter="handleQuery" class="search-input">
                                <template #prefix>
                                    <el-icon>
                                        <Search />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="商品分类">
                            <el-select v-model="queryParams.categoryId" placeholder="选择分类" clearable
                                class="category-select">
                                <el-option label="水果" value="1" />
                                <el-option label="蔬菜" value="2" />
                                <el-option label="粮食" value="3" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="商品状态">
                            <el-select v-model="queryParams.status" placeholder="选择状态" clearable class="status-select">
                                <el-option 
                                    v-for="dict in product_status"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                                />
                            </el-select>
                        </el-form-item>
                    </div>

                    <div class="form-buttons">
                        <el-button type="primary" @click="handleQuery">
                            <el-icon>
                                <Search />
                            </el-icon>搜索
                        </el-button>
                        <el-button @click="resetQuery">
                            <el-icon>
                                <Refresh />
                            </el-icon>重置
                        </el-button>
                    </div>
                </el-form>
            </el-card>
        </div>

        <!-- 操作按钮 -->
        <div class="action-bar">
            <el-button type="primary" icon="Plus" @click="handleAdd">新增商品</el-button>
            <el-button type="success" icon="Setting" @click="handleSpecSettings">规格管理</el-button>
            <el-button type="warning" icon="Download" @click="handleExport">导出数据</el-button>
        </div>

        <!-- 产品卡片展示 -->
        <el-row :gutter="20" class="product-card-container">
            <el-col :span="6" v-for="product in productsList" :key="product.id">
                <el-card class="product-card" :body-style="{ padding: '0px' }">
                    <div class="product-image">
                        <el-image :src="product.mainImage" fit="cover"
                            :preview-src-list="[product.mainImage, ...(product.images || []).map(img => img.url)]">
                            <template #error>
                                <div class="image-placeholder">
                                    <el-icon>
                                        <Picture />
                                    </el-icon>
                                </div>
                            </template>
                        </el-image>
                        <div class="product-status">
                            <el-tag 
                                :type="product_status.find(d => d.value === product.status).elTagType" 
                                effect="dark" 
                                size="small"
                            >
                                {{ product_status.find(d => d.value === product.status)?.label }}
                            </el-tag>
                        </div>
                    </div>
                    <div class="product-content">
                        <div class="product-info">
                            <h3 class="product-name" :title="product.productsName">{{ product.productsName }}</h3>
                            <div class="product-meta">
                                <div class="meta-item">
                                    <span class="label">规格：</span>
                                    <el-tooltip :content="getSpecNames(product)" placement="top">
                                        <span class="value">{{ getSpecValuesCount(product) }}个规格值</span>
                                    </el-tooltip>
                                </div>
                                <div class="meta-item">
                                    <span class="label">SKU：</span>
                                    <span class="value">{{ getSkuCount(product) }}个</span>
                                </div>
                            </div>
                            <div class="product-price">
                                <span class="price-label">起价：</span>
                                <span class="price-value">￥{{ getMinPrice(product) }}</span>
                            </div>
                            <div class="product-stock">
                                <span class="stock-label">总库存：</span>
                                <el-tag :type="getTotalStock(product) > 0 ? 'success' : 'danger'" effect="plain">
                                    {{ getTotalStock(product) }}
                                </el-tag>
                            </div>
                        </div>
                        <div class="product-actions">
                            <div class="action-item">
                                <el-tooltip 
                                    content="编辑商品" 
                                    placement="top"
                                    effect="dark"
                                >
                                    <el-button 
                                        link 
                                        type="primary" 
                                        @click="handleEdit(product)"
                                    >
                                        <el-icon><Edit /></el-icon>
                                    </el-button>
                                </el-tooltip>
                            </div>
                            <div class="action-item">
                                <el-tooltip 
                                    content="管理SKU" 
                                    placement="top"
                                    effect="dark"
                                >
                                    <el-button 
                                        link 
                                        type="primary" 
                                        @click="handleSkuManage(product)"
                                    >
                                        <el-icon><Goods /></el-icon>
                                    </el-button>
                                </el-tooltip>
                            </div>
                            <div class="action-item">
                                <el-tooltip 
                                    content="更多操作" 
                                    placement="top"
                                    effect="dark"
                                >
                                    <el-dropdown trigger="hover">
                                        <el-button link type="primary">
                                            <el-icon><More /></el-icon>
                                        </el-button>
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <el-dropdown-item @click="handleCopy(product)">
                                                    <el-icon><CopyDocument /></el-icon>
                                                    <span>复制商品</span>
                                                </el-dropdown-item>
                                                <el-dropdown-item @click="handleDelete(product)">
                                                    <el-icon><Delete /></el-icon>
                                                    <span>删除商品</span>
                                                </el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </el-tooltip>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup name="Products">
import { ref, reactive, computed, getCurrentInstance, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
import { listProducts,delProducts } from '@/api/farmer/products';
import { useDict } from '@/utils/dict';
import { 
    Search,
    Refresh,
    Plus,
    Setting,
    Download,
    Edit,
    Delete,
    Picture,
    More,
    Goods,
    CopyDocument,
    TrendCharts
} from '@element-plus/icons-vue';

const router = useRouter();
const { proxy } = getCurrentInstance();

// 获取字典数据
const { product_status } = useDict('product_status');
const dict = {
    type: {
        product_status
    }
};

// 基础数据
const productsList = ref([]);
const salesRankList = ref([]);
const total = ref(0);
const loading = ref(false);
const showSearch = ref(true);

// 查询参数
const queryParams = reactive({
    pageNum: 1,
    pageSize: 8,
    productsName: '',
    categoryId: '',
    status: '',  // 改为字符串类型
});

// Mock数据获取方法
const getMockProducts = () => {
    return [
        {
            id: 1,
            productsName: '红富士苹果',
            description: '新鲜采摘的红富士苹果，果肉脆甜，口感极佳',
            mainImage: 'https://example.com/apple.jpg',
            images: [
                { url: 'https://example.com/apple1.jpg' },
                { url: 'https://example.com/apple2.jpg' }
            ],
            status: 1,
            categoryId: 11,
            storageCondition: '常温',
            shelfLife: 30,
            origin: ['浙江省', '杭州市'],
            specifications: [
                {
                    id: 1,
                    name: '规格',
                    values: ['小果', '中果', '大果']
                },
                {
                    id: 2,
                    name: '包装',
                    values: ['散装', '礼盒装']
                }
            ],
            skus: [
                {
                    id: 1,
                    specs: { '规格': '小果', '包装': '散装' },
                    price: 12.8,
                    stock: 100,
                    image: 'https://example.com/apple-small.jpg'
                },
                {
                    id: 2,
                    specs: { '规格': '中果', '包装': '散装' },
                    price: 15.8,
                    stock: 200,
                    image: 'https://example.com/apple-medium.jpg'
                },
                {
                    id: 3,
                    specs: { '规格': '大果', '包装': '散装' },
                    price: 18.8,
                    stock: 150,
                    image: 'https://example.com/apple-large.jpg'
                },
                {
                    id: 4,
                    specs: { '规格': '中果', '包装': '礼盒装' },
                    price: 58.8,
                    stock: 50,
                    image: 'https://example.com/apple-gift.jpg'
                }
            ]
        },
        {
            id: 2,
            productsName: '有机生菜',
            description: '无农药栽培的有机生菜，新鲜采摘',
            mainImage: 'https://example.com/lettuce.jpg',
            images: [
                { url: 'https://example.com/lettuce1.jpg' }
            ],
            status: 1,
            categoryId: 21,
            storageCondition: '冷藏',
            shelfLife: 7,
            origin: ['浙江省', '杭州市'],
            specifications: [
                {
                    id: 3,
                    name: '重量',
                    values: ['250g', '500g']
                }
            ],
            skus: [
                {
                    id: 5,
                    specs: { '重量': '250g' },
                    price: 5.8,
                    stock: 80,
                    image: 'https://example.com/lettuce-250.jpg'
                },
                {
                    id: 6,
                    specs: { '重量': '500g' },
                    price: 10.8,
                    stock: 60,
                    image: 'https://example.com/lettuce-500.jpg'
                }
            ]
        },
        {
            id: 3,
            productsName: '本地小番茄',
            description: '本地种植的小番茄，酸甜可口',
            mainImage: 'https://example.com/tomato.jpg',
            images: [],
            status: 0,
            categoryId: 22,
            storageCondition: '常温',
            shelfLife: 15,
            origin: ['浙江省', '杭州市'],
            specifications: [],
            skus: [
                {
                    id: 7,
                    specs: {},
                    price: 8.8,
                    stock: 0,
                    image: ''
                }
            ]
        }
    ];
};

const getMockSalesRank = () => {
    return [
        { name: '红富士苹果', sales: 2580, unit: '斤' },
        { name: '有机大米', sales: 1860, unit: '斤' },
        { name: '新鲜西红柿', sales: 1350, unit: '斤' }
    ];
};

// 获取列表数据
const getList = async () => {
    loading.value = true;
    try {
        const productsRes = await listProducts(queryParams);
        const salesRank = getMockSalesRank();
        
        productsList.value = productsRes.rows;
        salesRankList.value = salesRank;
        total.value = productsRes.total;
    } catch (error) {
        console.error('获取数据失败：', error);
        ElMessage.error('获取数据失败');
    } finally {
        loading.value = false;
    }
};

// 搜索和重置
const handleQuery = () => {
    queryParams.pageNum = 1;
    getList();
};

const resetQuery = () => {
    proxy.resetForm("queryRef");
    handleQuery();
};

// 计算属性
const onSaleCount = computed(() => productsList.value.filter(product => product.status === 1).length);
const offSaleCount = computed(() => productsList.value.filter(product => product.status === 0).length);
const lowStockCount = computed(() => {
    return productsList.value.filter(product => {
        return product.skus.some(sku => sku.stock <= getWarningThreshold(product.unit));
    }).length;
});

// 工具方法
const getWarningThreshold = (unit) => {
    const thresholds = {
        '斤': 100,
        '千克': 50,
        '箱': 10,
        '个': 20
    };
    return thresholds[unit] || 0;
};

const getMinPrice = (product) => {
    if (!product.skus?.length) return '0.00';
    const minPrice = Math.min(...product.skus.map(sku => sku.price));
    return minPrice.toFixed(2);
};

const getTotalStock = (product) => {
    if (!product.skus?.length) return 0;
    return product.skus.reduce((total, sku) => total + sku.stock, 0);
};

const getSpecNames = (product) => {
    if (!product.specifications?.length) return '无规格';
    return product.specifications.map(spec => spec.name).join('、');
};

const getSpecValuesCount = (product) => {
    if (!product.specifications?.length) return 0;
    return product.specifications.reduce((total, spec) => total + spec.values.length, 0);
};

const getSkuCount = (product) => product.skus?.length || 0;

// 路由跳转方法
const handleAdd = () => router.push('/products/add');
const handleEdit = (product) => router.push(`/products/edit/${product.id}`);
const handleSpecSettings = () => router.push('/products/specs');
const handleSkuManage = (product) => router.push(`/products/sku/${product.id}`);

// 操作方法
const handleCopy = (product) => {
    proxy.$modal.confirm('确认复制该商品？').then(() => {
        // TODO: 调用复制API
        ElMessage.success('复制成功');
        getList();
    });
};

const handleDelete = (product) => {
    proxy.$modal.confirm('确认删除该商品？').then(async () => {
        loading.value = true;
        // console.log(product.id);
        const res = await delProducts(product.id)
        //delProducts(product.id)
        loading.value = false;
        // TODO: 调用删除API
        ElMessage.success('删除成功');
        getList();
    });
};

const handleExport = () => {
    // TODO: 实现导出功能
    ElMessage.success('导出成功');
};

onMounted(() => {
    getList();
});
</script>

<style lang="scss" scoped>
.app-container {
    padding: 20px;

    .statistics-container {
        margin-bottom: 20px;

        .statistics-card {
            height: auto;
            min-height: 210px;
            display: flex;
            flex-direction: column;

            :deep(.el-card__header) {
                padding: 0 15px;
                height: 50px;
                display: flex;
                align-items: center;
            }

            :deep(.el-card__body) {
                flex: 1;
                display: flex;
                flex-direction: column;
                padding: 15px;
                position: relative;
            }

            .card-header {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 16px;
                font-weight: bold;

                :deep(.el-tag) {
                    margin: 0;
                    height: 22px;
                    line-height: 20px;
                    padding: 0 8px;
                    font-size: 12px;
                    font-weight: normal;
                }
            }

            .statistics-value {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                min-height: 100px;
            }

            .number-wrapper {
                display: flex;
                align-items: baseline;
            }

            .number {
                font-size: 28px;
                font-weight: bold;
                color: #303133;
                line-height: 1;
            }

            .unit {
                font-size: 14px;
                color: #909399;
                margin-left: 4px;
            }

            // 订单详情样式
            .order-details {
                margin-top: 8px;
                display: flex;
                gap: 15px;

                .detail-item {
                    display: flex;
                    align-items: center;
                    gap: 5px;

                    .label {
                        font-size: 13px;
                        color: #909399;
                    }

                    .value {
                        font-size: 15px;
                        font-weight: 500;
                        color: #606266;
                    }
                }
            }

            // 分类统计样式
            .category-stats,
            .status-stats {
                display: flex;
                flex-direction: column;
                gap: 6px;
                font-size: 13px;

                .stat-item {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 22px;

                    .label {
                        color: #606266;
                    }

                    .value {
                        font-weight: 600;

                        &.success {
                            color: #67c23a;
                        }

                        &.warning {
                            color: #e6a23c;
                        }

                        &.danger {
                            color: #f56c6c;
                        }
                    }
                }
            }

            .statistics-compare {
                position: absolute;
                left: 15px;
                right: 15px;
                bottom: 15px;
                padding-top: 12px;
                border-top: 1px solid #f0f0f0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 13px;
                background-color: #fff;

                .label {
                    color: #909399;
                }

                .value {
                    &.increase {
                        color: #67c23a;
                    }

                    &.decrease {
                        color: #f56c6c;
                    }

                    &.normal {
                        color: #409eff;
                    }
                }
            }
        }
    }

    .search-wrapper {
        margin-bottom: 20px;

        .search-card {
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

            .compact-form {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                gap: 16px;

                .form-content {
                    flex: 1;
                    display: flex;
                    flex-wrap: wrap;
                    gap: 16px;
                    align-items: flex-start;

                    :deep(.el-form-item) {
                        margin: 0;
                        flex: 1;
                        min-width: 240px;

                        .el-form-item__label {
                            font-weight: 500;
                            color: #606266;
                            padding-right: 8px;
                        }

                        .el-form-item__content {
                            flex: 1;
                        }
                    }
                }

                .form-buttons {
                    display: flex;
                    gap: 8px;
                    padding-top: 1px;
                }
            }

            .search-input {
                width: 100%;
            }

            .price-range-wrapper {
                display: flex;
                align-items: center;
                gap: 8px;
                width: 100%;

                .price-input {
                    width: calc(50% - 8px);

                    :deep(.el-input__wrapper) {
                        padding-left: 8px;
                    }

                    :deep(.el-input__prefix) {
                        color: #909399;
                        font-size: 14px;
                    }
                }

                .price-separator {
                    color: #909399;
                    flex-shrink: 0;
                }
            }

            .category-select,
            .status-select {
                width: 100%;
            }

            :deep(.el-input__wrapper),
            :deep(.el-select .el-input__wrapper) {
                box-shadow: 0 0 0 1px #dcdfe6 inset;
                padding: 0 12px;
                height: 36px;
                line-height: 36px;

                &:hover {
                    box-shadow: 0 0 0 1px #c0c4cc inset;
                }

                &.is-focus {
                    box-shadow: 0 0 0 1px #409eff inset;
                }
            }

            :deep(.el-input__inner) {
                height: 36px;
                line-height: 36px;
            }

            :deep(.el-button) {
                height: 36px;
                padding: 0 16px;

                .el-icon {
                    margin-right: 4px;
                }
            }
        }
    }

    .action-bar {
        margin-bottom: 20px;
        display: flex;
        gap: 10px;
    }

    .product-card-container {
        margin-top: 20px;
    }

    .product-card {
        height: 100%;
        transition: all 0.3s;

        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }

        .product-image {
            position: relative;
            height: 200px;
            overflow: hidden;

            .el-image {
                width: 100%;
                height: 100%;
            }

            .image-placeholder {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #f5f7fa;
                color: #909399;
                font-size: 24px;
            }

            .product-status {
                position: absolute;
                top: 8px;
                right: 8px;
                z-index: 1;
            }
        }

        .product-content {
            padding: 16px;

            .product-info {
                .product-name {
                    margin: 0 0 12px;
                    font-size: 16px;
                    font-weight: 500;
                    color: var(--el-text-color-primary);
                    line-height: 1.4;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }

                .product-meta {
                    display: flex;
                    gap: 16px;
                    margin-bottom: 12px;

                    .meta-item {
                        display: flex;
                        align-items: center;
                        gap: 4px;

                        .label {
                            color: var(--el-text-color-secondary);
                            font-size: 13px;
                        }

                        .value {
                            color: var(--el-text-color-primary);
                            font-size: 13px;
                        }
                    }
                }

                .product-price {
                    margin-bottom: 8px;

                    .price-label {
                        font-size: 13px;
                        color: var(--el-text-color-secondary);
                    }

                    .price-value {
                        font-size: 16px;
                        font-weight: 500;
                        color: #ff4d4f;
                    }
                }

                .product-stock {
                    display: flex;
                    align-items: center;
                    gap: 8px;

                    .stock-label {
                        font-size: 13px;
                        color: var(--el-text-color-secondary);
                    }
                }
            }

            .product-actions {
                margin-top: 16px;
                padding-top: 16px;
                border-top: 1px solid var(--el-border-color-lighter);
                display: flex;
                justify-content: flex-end;
                gap: 16px;

                .action-item {
                    display: inline-flex;
                    align-items: center;
                }

                .el-button {
                    height: 32px;
                    width: 32px;
                    padding: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    &:hover {
                        background-color: var(--el-fill-color-light);
                        border-radius: 4px;
                    }

                    .el-icon {
                        font-size: 16px;
                    }
                }

                :deep(.el-dropdown-menu__item) {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    padding: 8px 16px;
                    
                    .el-icon {
                        margin: 0;
                    }
                }
            }
        }
    }
}

.el-range-separator {
    padding: 0 8px;
}

/* 添加新的样式 */
.product-dialog {
    :deep(.el-dialog__body) {
        padding: 20px 30px;
    }

    .upload-tip {
        font-size: 12px;
        color: #909399;
        margin-top: 12px;
        margin-left: 4px;
        line-height: 1.4;
        padding-left: 10px;
    }

    .form-section {
        margin-bottom: 24px;

        .section-header {
            margin-bottom: 20px;

            :deep(.el-divider__text) {
                font-size: 16px;
                font-weight: bold;
                color: #303133;
            }
        }
    }

    .w-full {
        width: 100%;
    }

    .product-uploader {
        .uploaded-image {
            width: 200px;
            height: 200px;
            object-fit: cover;
            border-radius: 4px;
        }

        .upload-placeholder {
            width: 200px;
            height: 200px;
            border: 1px dashed #d9d9d9;
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: border-color 0.3s;

            &:hover {
                border-color: #409eff;

                .el-icon {
                    color: #409eff;
                }
            }

            .el-icon {
                font-size: 28px;
                color: #8c939d;
                margin-bottom: 8px;
            }

            .upload-text {
                font-size: 14px;
                color: #8c939d;
            }
        }
    }

    .product-uploader-list {
        :deep(.el-upload--picture-card) {
            width: 100px;
            height: 100px;
            line-height: 100px;
        }

        :deep(.el-upload-list__item) {
            width: 100px;
            height: 100px;
        }
    }

    .upload-tip {
        font-size: 12px;
        color: #909399;
        margin-top: 8px;
    }

    .dialog-footer {
        text-align: right;
        padding-top: 20px;
    }
}

.sales-rank {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;

    .rank-list {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 4px;
        height: 100%;

        .rank-item {
            display: flex;
            align-items: center;
            height: 24px;

            .rank-number {
                width: 18px;
                height: 18px;
                line-height: 18px;
                text-align: center;
                border-radius: 50%;
                font-size: 12px;
                font-weight: bold;
                margin-right: 8px;
                flex-shrink: 0;
                color: #fff;

                &.rank-1 {
                    background-color: #f56c6c;
                }

                &.rank-2 {
                    background-color: #e6a23c;
                }

                &.rank-3 {
                    background-color: #409eff;
                }
            }

            .product-name {
                flex: 1;
                color: #606266;
                font-size: 13px;
                margin-right: 8px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .sales-count {
                color: #303133;
                font-weight: 500;
                font-size: 14px;
            }
        }
    }
}

.growth-info {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #606266;

    .growth-item {
        display: flex;
        justify-content: space-between;

        .value {
            font-weight: 500;

            &.increase {
                color: #67c23a;
            }

            &.decrease {
                color: #f56c6c;
            }
        }
    }
}

.description-text {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #67c23a;
    font-size: 13px;

    .el-icon {
        font-size: 14px;
    }
}
</style>
